// scroll-top 回到顶部

// Base
.e-scroll-top {
    display: none;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 40px;  
    right: 20px;
    cursor: pointer;     
    z-index: $e-dropdown-z-index - 5;
    background: e-brand-color();
    box-shadow: 0 0 15px 1px rgba(69,65,78, .2);
    opacity: 0;
    @include e-transition();

    @include e-rounded {
        border-radius: $e-border-radius;
    }

    svg {
        height: 20px;
        width: 20px;
    }

    > i {
        font-size: 1.3rem;
        color: e-brand-color(inverse);
    }          

    @include e-svg-icon-color(e-brand-color(inverse));

    &:hover {
        > i {
            color: e-brand-color(inverse);
        }
    }

    .e-scroll-top--on & {
        opacity: .3;
        animation: e-scroll-top-show-animation .4s ease-out 1;
        display: flex; 

        &:hover {
            @include e-transition();
            opacity: 1;
        }
    }

    @include e-tablet-and-mobile {
        bottom: 30px;  
        right: 15px;
    }
}

// 动画
@keyframes e-scroll-top-show-animation {
    from   { margin-bottom: -15px }
    to { margin-bottom: 0; }
}